<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/common.css" />

		<link rel="stylesheet" href="css/tabbar.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-home mui-pull-left myhome"></a>
			<h1 class="mui-title">上传泵站运行信息</h1>
			<a id="menu" class="mui-action-menu
				  mui-icon mui-icon-bars
				   mui-pull-right" href="#topPopover">
			</a>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#tabbar-with-sign">
				<span class="mui-icon mui-icon-chat"></span>
				<span class="mui-tab-label">签到</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-pump">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">泵站</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-csdt">
				<span class="mui-icon mui-icon-settings"></span>
				<span class="mui-tab-label">调蓄池</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-river">
				<span class="mui-icon mui-icon-bars"></span>
				<span class="mui-tab-label">河道</span>
			</a>
			<a class="mui-tab-item" id="logout">
				<span class="mui-icon mui-icon-close"></span>
				<span class="mui-tab-label">退出</span>
			</a>
		</nav>

		<div class="mui-content">
			<!--签到-->
			<div id="tabbar-with-sign" class="mui-control-content mui-active mui-content-padded">
				<!--拍照，预览，【上传按钮，显示图片】-->
				<!--<button btn_uploadimage type="button" class="mui-btn mui-btn-block mui-icon mui-icon-plus mui-left">
		        	添加现场值班照片
				</button>-->
				<p>
					<img id="btn_uploadimage" src="image/no_pic.jpg" data-preview-src="" data-preview-group="1" />
				</p>
				<!--定位-->
				<!--<button id="btn_location" type="button" class="mui-btn mui-btn-block mui-icon mui-icon-location mui-left">
		        	获取当前位置信息
				</button>
				<div>
					<input type="text" id="now_location" placeholder="当前位置的X，Y坐标" readonly="true">
				</div>-->
				<!--【按钮，显示坐标INPUT】-->
				<!--签到按钮-->
				<button type="button" class="mui-btn mui-btn-block mui-icon mui-icon-info" style="background: #22a18d;color: #ffffff;">
					签到
				</button>
			</div>
			<!--泵站-->
			<div id="tabbar-with-pump" class="mui-control-content mui-content-padded">
				<!--泵机-->
				<div class="beng">泵机运行记录</div>
				<div class="mui-input-row">
					<label>泵机编号</label>
					<select>
						<option>BJ001</option>
						<option>BJ002</option>
					</select>
				</div>

				<div class="mui-input-row">
					<label>当前状态</label>
					<select class="mui-select">
							<option selected="selected">请选择</option>
							<option>开机</option>
							<option>关机</option>
							<option>故障</option>
							<option>维修</option>
						</select>
				</div>

				<div class="mui-input-row">
					<label>天气情况</label>
					<select class="mui-select">
							<option selected="selected">请选择</option>
							<option>大雨</option>
							<option>中雨</option>
							<option>小雨</option>
						</select>
				</div>
				<!--泵机-->

				<!--格栅机-->

				<div class="beng">格栅机运行记录</div>
				<div class="mui-input-row">
					<label>格栅机编号</label>
					<select>
						<option>GSJ001</option>
						<option>GSJ002</option>
					</select>
				</div>

				<div class="mui-input-row ">
					<label>当前状态</label>
					<select class="mui-select" style="border: 1px dotted #D3D3D3;">
							<option selected="selected">请选择</option>
							<option>开机</option>
							<option>关机</option>
							<option>故障</option>
							<option>维修</option>
						</select>
				</div>

				<!--格栅机-->

				<!--水电表-->
				<div class="beng">水电记录</div>
				<div class="mui-input-row">
					<label>电表表号</label>
					<select>
						<option>DB001</option>
						<option>DB002</option>
					</select>
				</div>
				<div class="mui-input-row">
					<label>峰正向有功</label>
					<input type="text" class="mui-input-clear" placeholder="请填写读数">
				</div>
				<div class="mui-input-row">
					<label>平正向有功</label>
					<input type="text" class="mui-input-clear" placeholder="请填写读数">
				</div>
				<div class="mui-input-row">
					<label>谷正向有功</label>
					<input type="text" class="mui-input-clear" placeholder="请填写读数">
				</div>
				<div class="mui-input-row">
					<label>正向有功</label>
					<input type="text" class="mui-input-clear" placeholder="请填写读数">
				</div>
				<div class="mui-input-row">
					<label>正向无功</label>
					<input type="text" class="mui-input-clear" placeholder="请填写读数">
				</div>
				<div class="mui-input-row">
					<label>反向无功</label>
					<input type="text" class="mui-input-clear" placeholder="请填写读数">
				</div>
				<div class="mui-input-row">
					<label>水表读数</label>
					<input type="text" class="mui-input-clear" placeholder="请填写读数">
				</div>

				<div class="mui-button-row">
					<button type="button" class="mui-btn mui-icon mui-icon-checkmarkempty mui-mybtn" style="background: #22a18d;color: #ffffff;">确定</button>&nbsp;&nbsp;
					<button type="button" class="mui-btn mui-btn-danger mui-icon mui-icon-close mui-mybtn" onclick="return false;">取消</button>
				</div>

			</div>

			<!--调蓄池-->
			<!--调蓄池闸门运行记录表-->
			<div id="tabbar-with-csdt" class="mui-control-content mui-content-padded">

				<div class="beng">闸门运行记录</div>
				<div class="mui-input-row">
					<label>闸门编号</label>
					<select>
						<option>ZM001</option>
						<option>ZM002</option>
					</select>
				</div>

				<div class="mui-input-row">
					<label>当前状态</label>
					<select class="mui-select">
							<option selected="selected">请选择</option>
							<option>开机</option>
							<option>关机</option>
							<option>故障</option>
							<option>维修</option>
						</select>
				</div>
				<div class="mui-input-row">
					<label>开闸时调蓄池水位（m）</label>
					<input type="text" class="mui-input-clear" placeholder="请填写读数">
				</div>
				<div class="mui-input-row">
					<label>关闸时调蓄池水位（m）</label>
					<input type="text" class="mui-input-clear" placeholder="请填写读数">
				</div>

				<div class="mui-input-row" style="height: 130px;">
					<label>开闸原因</label>
					<textarea id="textarea" rows="5" placeholder="请输入开闸原因"></textarea>
				</div>
				<div class="mui-input-row">
					<label>天气情况</label>
					<select class="mui-select">
							<option selected="selected">请选择</option>
							<option>大雨</option>
							<option>中雨</option>
							<option>小雨</option>
						</select>
				</div>

				<!--调蓄池泵机运行记录表-->

				<div class="beng">泵机运行记录</div>
				<div class="mui-input-row">
					<label>泵机编号</label>
					<select>
						<option>BJ001</option>
						<option>BJ002</option>
					</select>
				</div>
				<div class="mui-input-row">
					<label>当前状态</label>
					<select class="mui-select">
							<option selected="selected">请选择</option>
							<option>开机</option>
							<option>关机</option>
							<option>故障</option>
							<option>维修</option>
						</select>
				</div>

				<!--调蓄池泵机运行记录表-->

				<!--调蓄池格栅机运行记录表-->
				<div class="beng">格栅机运行记录</div>
				<div class="mui-input-row">
					<label>格栅机编号</label>
					<select>
						<option>GSJ001</option>
						<option>GSJ002</option>
					</select>
				</div>
				<div class="mui-input-row">
					<label>当前状态</label>
					<select class="mui-select">
							<option selected="selected">选择择</option>
							<option>开机</option>
							<option>关机</option>
							<option>故障</option>
							<option>维修</option>
						</select>
				</div>

				<!--调蓄池格栅机运行记录表-->

				<!--调蓄池水、电记录表-->
				<div class="beng">水、电记录</div>
				<div class="mui-input-row">
					<label>电表表号</label>
					<select>
						<option>DB001</option>
						<option>DB002</option>
					</select>
				</div>
				<div class="mui-input-row">
					<label>峰正向有功</label>
					<input type="text" class="mui-input-clear" placeholder="请填写读数">
				</div>
				<div class="mui-input-row">
					<label>平正向有功</label>
					<input type="text" class="mui-input-clear" placeholder="请填写读数">
				</div>
				<div class="mui-input-row">
					<label>谷正向有功</label>
					<input type="text" class="mui-input-clear" placeholder="请填写读数">
				</div>
				<div class="mui-input-row">
					<label>正向有功</label>
					<input type="text" class="mui-input-clear" placeholder="请填写读数">
				</div>
				<div class="mui-input-row">
					<label>正向无功</label>
					<input type="text" class="mui-input-clear" placeholder="请填写读数">
				</div>
				<div class="mui-input-row">
					<label>反向无功</label>
					<input type="text" class="mui-input-clear" placeholder="请填写读数">
				</div>
				<div class="mui-input-row">
					<label>水表读数</label>
					<input type="text" class="mui-input-clear" placeholder="请填写读数">
				</div>

				<div class="mui-button-row">
					<button type="button" class="mui-btn mui-icon mui-icon-checkmarkempty mui-mybtn" style="background: #22a18d;color: #ffffff;">确定</button>&nbsp;&nbsp;
					<button type="button" class="mui-btn mui-btn-danger mui-icon mui-icon-close mui-mybtn" onclick="return false;">取消</button>
				</div>
				<!--调蓄池水、电记录表-->

			</div>
			<!--河道-->
			<div id="tabbar-with-river" class="mui-control-content mui-content-padded">

				<!--河道闸门运行记录表 -->
				<div class="beng">闸门运行记录 </div>
				<div class="mui-input-row">
					<label>闸门名称</label>
					<input type="text" value="盘龙江1号闸门" placeholder="16号闸门" readonly="readonly">
				</div>
				<div class="mui-input-row">
					<label>闸门编号</label>
					<select>
						<option>ZM001</option>
						<option>ZM002</option>
					</select>
				</div>
				<div class="mui-input-row">
					<label>当前状态</label>
					<select class="mui-select">
						<option selected="selected">请选择</option>
						<option>开机</option>
						<option>关机</option>
						<option>故障</option>
						<option>维修</option>
					</select>
				</div>
				<div class="mui-input-row">
					<label>闸门开启高度</label>
					<input type="text" placeholder="请输入读数">
				</div>
				<div class="mui-input-row" style="height: 130px">
					<label>开闸原因</label>
					<textarea rows="5" placeholder="请输入开闸原因"></textarea>
				</div>
				<div class="mui-input-row">
					<label>天气情况</label>
					<select class="mui-select">
							<option selected="selected">请选择</option>
							<option>小雨</option>
							<option>中雨</option>
							<option>大雨</option>
						
						</select>
				</div>

				<!--河道闸门运行记录表 -->
				<div class="mui-button-row" style="border: none;">

					<button type="button" class="mui-btn mui-icon mui-icon-checkmarkempty mui-mybtn" style="background: #22a18d;color: #ffffff;">确定</button>&nbsp;&nbsp;
					<button type="button" class="mui-btn mui-btn-danger mui-icon mui-icon-close mui-mybtn">取消</button>

				</div>

			</div>
			<!--<div id="tabbar-with-logout" class="mui-control-content mui-content-padded">
				<button onclick="window.location.href='login.html'" class="mui-btn mui-btn-block mui-btn-primary mui-btn-danger" type="submit" >退出当前用户</button>
			</div>-->
		</div>

		<!--右上角弹出菜单-->
		<div id="topPopover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<a href="today.html">今日签到</a>
						</li>
						<li class="mui-table-view-cell">
							<a href="weekday.html">本周签到</a>
						</li>
						<li class="mui-table-view-cell">
							<a href="monthday.html">本月签到</a>
						</li>

					</ul>
				</div>
			</div>

		</div>

	</body>
	<script src="js/mui.min.js"></script>
	<script type="text/javascript" src="js/mui.zoom.js"></script>
	<script type="text/javascript" src="js/mui.previewimage.js"></script>
	<!--H5+-->
	<script type="text/javascript" src="js/common.js"></script>
	<script type="text/javascript" src="js/immersed.js"></script>
	<script>
		(function($, doc) {
			$.init({
				statusBarBackground: '#f7f7f7'

			});
			$.plusReady(function() {
				window.addEventListener('resize', function() {
					oauthArea.style.display = document.body.clientHeight > 400 ? 'block' : 'none';
				}, false);
				$.back = function(event) {
					var btnArray = ['是', '否'];
					mui.confirm("确认退出？", "提示",btnArray,function(e){
						if(e.index==1){
							plus.runtime.quit();
						}else{
							return;
						}
						
					})
				};
				doc.getElementById("logout").addEventListener("tap", function() {
						window.location.href = 'login.html';
					})
					//添加现场值班照片
				doc.getElementById("btn_uploadimage").addEventListener("click", function() {
						getImage();
					})
					//开始拍照
				function getImage() {
					//outSet("开始拍照：");
					var cmr = plus.camera.getCamera();

					cmr.captureImage(function(p) {
						//outLine("成功：" + p);
						plus.io.resolveLocalFileSystemURL(p, function(entry) {
							//createItem(entry);

							var imgUrl = entry.toLocalURL();
							doc.getElementById("btn_uploadimage").src = imgUrl;
						}, function(e) {
							mui.alert("失败：" + "读取拍照文件错误", "提示");
							//alert("读取拍照文件错误：" + e.message);
						});
					}, function(e) {
						mui.alert("失败：" + "取消操作", "提示");
					}, {
						filename: "_doc/camera/",
						index: 1
					});
				}

				function getLocation() {
					plus.geolocation.getCurrentPosition(getPos, function(e) {

					}, {
						provider: 'amap',
						geocode: true
					})
				}

				function getPos(position) {

					var str = position.coords.longitude + ", " + position.coords.latitude; //经度
					doc.getElementById("now_location").value = str;
				}
				doc.getElementById("btn_location").addEventListener("click", function() {
					getLocation();
				});

			});

		}(mui, document));
	</script>

</html>